<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="/layer/layer.js"></script>
</head>
<body>
<div class="container" id="roleOfResourceApp">
    <div class="row">
        <table class="table table-hover">
            <thead>
            <tr>
                <th>ID</th>
                <th>名字</th>
                <th>状态</th>
                <th>编辑</th>
            </tr>
            </thead>
            <tbody>

            <tr v-for="r in roleInfo.resourceList">
                <td>{{r.id}}</td>
                <td>{{r.name}}</td>
                <td>已授权</td>
                <td>
                    <button class="btn btn-warning btn-sm" @click="authorize(r.id,roleInfo.id)">
                        取消授权
                    </button>
                </td>
            </tr>

            <tr v-for="u in pageObj">
                <td>{{u.id}}</td>
                <td>{{u.name}}</td>
                <td>未授权</td>
                <td>
                    <button class="btn btn-primary btn-sm" @click="authorize(u.id,roleInfo.id)">
                        授权
                    </button>
                </td>
            </tr>

            </tbody>
        </table>
    </div>
</div>
<script>
    new Vue({
        el: "#roleOfResourceApp",
        data: {
            roleInfo: {},
            pageObj: {},
            roleId: ""
        },
        created() {
            this.getRoleInfo(get_parameter("id"));
            this.getRoleNotHave(get_parameter("id"));
        },
        methods: {
            getRoleInfo(id) {
                var vm = this;
                $.post("/role/findRoleById", {id: id}, function (response) {
                    if (response.code == 200) {
                        vm.roleInfo = response.data
                        vm.roleId = response.data.id
                    }
                })
            },
            getRoleNotHave(id) {
                var vm = this;
                $.post("/role/findRoleNotHave", {id: id}, function (response) {
                    if (response.code == 200) {
                        vm.pageObj = response.data
                    }
                })
            },
            authorize(resourceId, roleId) {
                var vm = this;
                $.post("/role/authorize", {resourceId: resourceId, roleId: roleId}, function (response) {
                    if (response.code == 200) {
                        vm.getRoleInfo(roleId);
                        vm.getRoleNotHave(roleId);
                    }
                })
            }
        }
    })

    //获取路径中的值
    function get_parameter(name) {
        var lot = location.search;
        var reg = new RegExp(".*" + name + "\\s*=([^=&#]*)(?=&|#|).*", "g");
        return decodeURIComponent(lot.replace(reg, "$1"));
    }

</script>
</body>
</html>